<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="变更产品信息" v-model="visible" align-center width="1200px" :z-index="2000" @close="handleClose">
    <vxe-table ref="tableRef" :data="cloneData" :height="560" size="small">
      <vxe-column :min-width="100">
        <template #header>
          <div>sku</div>
        </template>
        <template #default="{ row }">
          {{ row.sku }}
        </template>
      </vxe-column>
      <vxe-column :min-width="180">
        <template #header>
          <div>* 需求数量</div>
        </template>
        <template #default="{ row }">
          <div class="flex flex-col gap-1 p-1">
            <el-input-number v-model="row.demand_num" controls-position="right" :min="0" :step="1" :precision="0"
              class="w-full" />
          </div>
        </template>
      </vxe-column>
      <vxe-column :min-width="180">
        <template #header>
          * 目的仓
        </template>
        <template #default="{ row }">
          <div class="flex flex-col gap-1 p-1">
            <el-select v-model="row.destination_warehouse" class="w-full" clearable filter disabled placeholder="目的仓">
              <el-option v-for="(d, i) in options.destination_warehouse" :key="i" :label="d.label"
                :value="d.value"></el-option>
            </el-select>
          </div>
        </template>
      </vxe-column>
      <vxe-column :min-width="180">
        <template #header>
          <div v-if="form.basic.demand_type === 2">ASIN</div>
          * 国家
          <div>* 需求日期</div>
        </template>
        <template #default="{ row }">
          <div class="flex flex-col gap-1 p-1">
            <el-input v-if="form.basic.demand_type === 2" v-model="row.asin" placeholder="请输入" class="w-full" />
            <el-select v-model="row.country" class="w-full" clearable filter placeholder="国家" disabled>
              <el-option v-for="(d, i) in options.country" :key="i" :label="d.label" :value="d.value"></el-option>
            </el-select>
            <el-date-picker v-model="row.demand_time" type="date" value-format="YYYY-MM-DD" class="w-full"
              placeholder="需求日期" />
          </div>
        </template>
      </vxe-column>
      <vxe-column :min-width="340">
        <template #header>
          <div>* 负责销售/* 需求数量/部门</div>
        </template>
        <template #default="{ row }">
          <div v-for="(da, idx) in row.detail" :key="idx" class="flex gap-1 p-1">
            <VCascader v-model="da.sale_id" placeholder="负责销售" filterable clearable class="w-full"
              @change="val => saleChange(da, val)" />
            <el-input-number v-model="da.demand_num" :controls="false" :min="0" :step="1" :precision="0"
              placeholder="需求数量" />
            <el-input :value="da.department_name" placeholder="部门" disabled class="w-full" />
            <el-button link type="primary" @click="row.detail.splice(idx, 1)">移除</el-button>
          </div>
          <el-button link type="primary" @click="row.detail.push({ sale_id: '', department_id: '' })">添加</el-button>
        </template>
      </vxe-column>
      <vxe-column :min-width="180">
        <template #header>
          运输方式
        </template>
        <template #default="{ row }">
          <el-select v-model="row.transport_type" class="w-full" clearable filter placeholder="运输方式">
            <el-option v-for="(d, i) in options.transport_type" :key="i" :label="d.label" :value="d.value"></el-option>
          </el-select>
        </template>
      </vxe-column>
      <vxe-column title="变更原因" min-width="100">
        <template #default="{ row }">
          <el-input v-model="row.detail_remark" placeholder="备注" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
            :maxlength="300" />
        </template>
      </vxe-column>
      <vxe-column title="操作" fixed="right" :width="70">
        <template #default="{ rowIndex }">
          <el-button link type="primary" @click="cloneData.splice(rowIndex, 1)">移除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit(2)">保 存</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit(1)">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import XEUtils from 'xe-utils'
import api from '../../api'
import { getDepartment } from '@/api/public'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
  form: { type: Object, default: () => ({}) },
})

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const data = ref([])
const cloneData = ref([])

const emit = defineEmits(['close'])


const saleChange = (da, { value }) => {
  getDepartment({ select_user_id: value }).then(res => {
    da.department_id = res.data.department_id
    da.department_name = res.data.department_name
  })
}

// 打开弹窗
const open = async (list) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  data.value = list
  loadings = reactive({})
  cloneData.value = XEUtils.clone(list, true)
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = (is_submit) => {
  loadings.submit = true
  api.skuChange({ sku: cloneData.value, is_submit }).then(res => {
    cloneData.value.forEach(da => {
      const item = res.data.find(d => da.pds_id === d.pds_id)
      if (item) {
        da.message = item.message
      }
    })
    ElMessage.success('操作成功')
    data.value = XEUtils.clone(cloneData.value, true)
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open, close })
</script>../../api